<template>
  <div>
    <h1>展示的内容:{{ msg }}</h1>
    <input type="text" @keyup.enter="fn" />
    <hr />
    <img width="300" :src="imgurl" alt="" />
    <input type="file" @change="change" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: '',
      imgurl: '',
    }
  },
  methods: {
    fn(e) {
      console.log(e)
      this.msg = e.target.value
      e.target.value = ''
    },
    change(e) {
      // console.log(e)
      console.log(e.target.files[0])
      const imgFile = e.target.files[0]
      // 传入一个事件对象   获取一个本地可以访问的本地地址
      const imgurl = URL.createObjectURL(imgFile)
      this.imgurl = imgurl
      // this.imgurl = e.target.files[0].name
    },
  },
}
</script>

<style></style>
